<template>
	<view class="">
		<view class="m2432 p24 bgf br12">
			<view class="" v-for="(item,index) in arr" :key="item.id" @click="selectProceeds(item,index)">
				<view class="flex_btw">
					<view class="flex_x pt6">
						<image class="img60" src="/static/index/serve/qian.png" mode=""></image>
					</view>
					<view class="flex1 mlr20">
						<view class="c6 fw500 fs24">2022-03 {{item.name}}</view>
						<view class="fw500 fs24 mt6">
							<text class="c3">累计</text>
							<text class="c2a7 ml10">￥407.56</text>
						</view>
					</view>
					<view class="">
						<view class="c2a7 fs24 fw500">共计100单</view>
					</view>
				</view>
				<view class="cut_line mtb24"></view>
				<view class="v-collapse"
					:style="[{ height: actice_list.indexOf(index) !== -1 ? collapseHeight + 'px' : '0' }]" @click.stop="">
					<view class="u-collapse-content" :id="'id' + index">
						<view class="ml80">
							<view class="" v-for="(itema,indexa) in item.children" :key="itema.id">
								<view class="">
									<view class="flex_btw">
										<view class="fs24">
											<view class="c3">共100单</view>
											<view class="c9 mt4">2022-03-024</view>
										</view>
										<view class="fs24 fw500">
											<view class="c2a7">￥407.56</view>
											<view class="mt4 tc">
												<text class="cf0" v-if="indexa>0">未入账</text>
												<text class="c3" v-else>已入账</text>
											</view>
										</view>
									</view>
									<view class="cut_line mtb24" v-if="indexa != item.children.length - 1 "></view>
								</view>
							</view>
						</view>
						<view class="cut_line mtb24"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				arr: [{
						id: 1,
						name: '分类1',
						children: [{
								id: 10,
								name: '分类1—内容1',
							},
							{
								id: 11,
								name: '分类1—内容2'
							},
						],
					},
					{
						id: 2,
						name: '分类2',
						children: [{
								id: 20,
								name: '分类2—内容1'
							},
							{
								id: 21,
								name: '分类2—内容2'
							},
						],
					},
					{
						id: 3,
						name: '分类3',
						children: [{
								id: 30,
								name: '分类3—内容1'
							},
							{
								id: 31,
								name: '分类3—内容2'
							},
						],
					},
				],
				actice: '', //标识
				actice_list: [], //标识数组
				collapseHeight: 0, //获取展开高度

				accordion: false, //是否开启手风琴模式
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			selectProceeds(item, index) { //点击
				if (this.accordion) {
					this.actice_list.splice(0, 1)
					if (this.actice === index) {
						this.actice_list = []
					} else {
						this.actice_list.push(index)
					}
					this.actice = index

				} else {
					let flag = this.actice_list.some(v => {
						return v == index
					})
					if (!flag) {
						this.actice_list.push(index)
					} else {
						this.actice_list.splice(this.actice_list.indexOf(index), 1)
					}
				}
				this.queryRect(index);
			},

			queryRect(e) { // 查询内容高度
				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
				// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
				this.$uGetRect('#id' + e).then(res => {
					this.collapseHeight = res.height;
				})
			},
			$uGetRect(selector, all) { //获取布局节点高度
				return new Promise(resolve => {
					uni.createSelectorQuery().
					in(this)[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect(rect => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect)
							}
							if (!all && rect) {
								resolve(rect)
							}
						})
						.exec()
				})
			},
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.v-collapse {
		height: 0rpx;
		overflow: hidden;
		transition: all 0.4s;

		.u-collapse-content {
			overflow: hidden;
			/* 这个要加，不然里面的内容在没达到内容的高度时就会透出来*/
		}
	}
</style>
